<template>
    <div id="DepartmentDetails">
        <div class="header"><img class="return_img" src="@/assets/Return.png" style="width:.23rem;height:.4rem;" v-on:click="back">部门绩效目标</div>
        <div class="personaldetails">
            <tab>
                <tab-item selected @on-item-click="onItemClick">部门绩效目标</tab-item>
                <tab-item @on-item-click="onItemClick">邀请订单({{ List_data.orderType==2?'￥'+List_data.countOrder:List_data.countOrder+'单' }})</tab-item>
                <tab-item @on-item-click="onItemClick">邀请会员({{ List_data.countNumber }})</tab-item>
            </tab>
            <div class="personaldetails_content">
                <popup-picker value-text-align="left" :data="[List_time]" v-model="value">
                    <template slot="title" slot-scope="props">
                    <span style="vertical-align:middle;"><img class="img" src="@/assets/calendar.png" alt="" width="16"></span>
                    </template> 
                </popup-picker>
                <ul v-if="index == 0">
                    <div class="lis">
                        <p style="width:1.8rem;display:inline-block;font-size: 0.24rem;">姓名</p>               
                        <span>拉新量({{ List_data.countNumber }})</span>
                        <span  v-if="List_data.orderType == 1">订单数({{ List_data.countOrder+'单' }})</span>
                        <span  v-if="List_data.orderType == 2">订单额({{ '￥'+Math.floor(List_data.countOrder*100)/100 }})</span>
                        <span>奖励</span>
                    </div>
                    <li v-for="(item,index) in deptDetailedList" :key="index">
                        <div class="personaldetails_l left person">
                            <div class="left" style="width:1.8rem;display:inline-block;margin:0">
                                <p style="width:70%;float:left;position: relative;">
                                    <!-- <img :src="item.photo?item.photo:require('@/assets/member_img.png')" alt="" style="width:.82rem"> -->
                                    <span class="kh" v-if="item.type == 2">不考核</span>
                                </p>                                
                                <span class="nikname">{{ item.name }}</span>                               
                            </div>                            
                            <div class="p">
                                <p>{{ item.doneNumber }}</p>
                                <span v-if="item.type==1">                                  
                                   {{ ((item.doneNumber/item.targetNumber )*100).toString().substring(0, 4)  }}% 
                                </span>                               
                                <box v-if="item.type == 1" class="jd_box">
                                    <x-progress :percent="_calc(item.doneNumber,item.targetNumber)" :show-cancel="false"></x-progress>
                                </box>
                            </div>
                            <div class="p">
                                <p v-if="item.orderType ==2">{{ item.doneAmount }}</p>
                                <p v-if="item.orderType ==1">{{ item.doneOrderNumber }}</p>
                                <span  v-if="item.type==1 && item.orderType ==2">                                                    
                                  {{ Math.floor((item.doneAmount/item.targetOrder )*100*100)/100 }}%                           
                                </span>  
                                <span v-if="item.type==1 && item.orderType ==1">
                                    {{  Math.floor((item.doneOrderNumber/item.targetOrder)*100*100)/100 }}%
                                </span>  
                                <box v-if="item.type == 1" class="jd_box">
                                    <x-progress :percent="_calc(item.doneAmount,item.targetOrder)" :show-cancel="false"></x-progress>
                                </box>
                            </div>                           
                            <p class="p"><span class="reward">￥{{ Math.floor(item.reward*100)/100 }}</span></p>
                        </div>
                    </li>
                </ul>
                <ul v-if="index == 1">
                    <li  v-if="orderList.length == 0" style="text-align:center;height:0;padding:0;border:none">
                            <img class="no_data" src="@/assets/no_data.png" alt="">
                    </li>
                    <li v-for="(item,index) in orderList" :key="index">
                        <div class="personaldetails_l left">
                            <p class="left"><img :src="item.headImg?item.headImg:require('@/assets/member_img.png')" alt="" width="41"></p>
                            <div class="left">
                                <p style="margin-top:0">{{ item.nickName }}</p>
                                <p>{{ item.createTime }}</p>
                            </div>
                        </div>
                        <div class="personaldetails_r right">
                            <p>￥{{ item.sellPrice }}</p>
                            <p style="color: #666">{{ item.parentName }}</p>
                        </div>
                    </li>
                </ul>
                <ul v-if="index == 2">
                    <li  v-if="userNumberList.length == 0" style="text-align:center;height:0;padding:0;border:none">
                            <img class="no_data" src="@/assets/no_data.png" alt="">
                    </li>
                    <li v-for="(item,index) in userNumberList" :key="index">
                        <div class="personaldetails_l left">
                            <p class="left"><img :src="item.headImg?item.headImg:require('@/assets/member_img.png')" alt="" width="41"></p>
                            <div class="left">
                                <p>{{ item.name }}</p>
                                <p style="margin-top:0">{{ item.nickName }}</p>
                            </div>
                        </div>
                        <div class="personaldetails_r right recommender">
                            <p>{{ item.createTime }}</p>
                            <p>{{ item.parentName }}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import { XHeader, Tab, TabItem, PopupPicker, XProgress, Box } from "vux";
import { getDeptDetailedList, getTargetList } from "@/service/home.js";
export default {
  components: { XHeader, Tab, TabItem, PopupPicker, XProgress, Box },
  data() {
    return {
      token: localStorage.token,
      targetId: localStorage.targetId,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      value: ["1"],
      List_time: [],
      targetList: "", //时间
      List_data: "",
      userNumberList: "", //邀请订单
      orderList: "", //拉新记录
      deptDetailedList: "", //部门总览
      index: 0,
      doneAmount: "",
      doneNumber: ""
    };
  },
  mounted() {
    this._getDeptDetailedList();
    this._add_time();
  },
  watch: {
    value(newName, oldName) {
      this.value.join(",");
      var str = this.value[0];
      this.targetList.forEach(item => {
        var att = item.startTime + "至" + item.endTime;
        if (att == str) {
          this.targetId = item.targetId;
          if (newName) {
            localStorage.setItem("newName", newName);
            this._getDeptDetailedList();
          }
        }
      });
    }
  },
  computed: {
    percent2() {
      var deptDetailedList = this.deptDetailedList;
      this.deptDetailedList.forEach(item => {
        return item.doneNumber / this.userInfo.targetNumber;
      });
    }
  },
  methods: {
    _calc(count, total) {
      return (count / total) * 100 > 100 ? 100 : (count / total) * 100;
    },
    // 获取列表数据
    _getDeptDetailedList() {
      var data = {
        targetId: this.targetId
      };
      getDeptDetailedList(data).then(res => {
        this.userNumberList = res.data.userNumberList;
        this.orderList = res.data.orderList;
        this.deptDetailedList = res.data.deptDetailedList;
        this.List_data = res.data;
        console.log(res.data);
      });
    },
    //获取时间
    _add_time() {
      getTargetList().then(res => {
        this.targetList = res.data.targetList;
        this.targetList.forEach((item, index) => {
          var time = item.startTime + "至" + item.endTime;
          this.List_time.push(time);
          var array = [];
          array.push(localStorage.newName);
          this.value = array;
        });
      });
    },
    //切换导航
    onItemClick(index) {
      this.index = index;
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  }
};
</script>
<style scoped lang="less">
#DepartmentDetails {
  .vux-header {
    background: #ddd;
    .vux-header-title {
      color: #000000 !important;
    }
  }
  .personaldetails {
    width: 100%;
    min-height: 13.24rem;
    background-image: linear-gradient(top, #8239d0, #d275f4);
    position: relative;
    // position: absolute;
    // top: .8rem;
    // bottom: 0;
    .vux-cell-box {
      margin-bottom: 15px;
      margin-top: 15px;
      color: #fff;
    }
    .img {
      position: absolute;
      top: 0;
      right: 0;
      width: 0.42rem;
      height: 0.44rem;
    }
    .personaldetails_content {
      width: 94%;
      margin: 0 auto;
      ul {
        background: #fff;
        border-radius: 5px;
        .lis {
          height: 0.6rem;
          line-height: 0.6rem;
          background: #ededed;
          display: flex;
          padding: 0 10px;
          span {
            display: inline-block;
            text-align: center;
            flex: 1;
            font-size: 0.24rem;
          }
        }
        li {
          height: 1.3rem;
          padding: 0.18rem;
          border-bottom: 1px solid #ddd;
          .person {
            width: 100%;

            .kh {
              width: 100%;
              text-align: center;
              position: absolute;
              left: -0.09rem;
              top: -0.2rem;
              background: #8239d0;
              color: #fff;
              border-radius: 0.2rem;
            }
          }
          .personaldetails_l {
            display: flex;
            .nikname {
              width: 1rem;
              display: inline-block;
              font-size: 0.3rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-top: 0.2rem;
            }
            .p {
              flex: 1;
              text-align: center;
              .reward {
                display: inline-block;
                margin-top: 0.2rem;
                color: red;
              }
            }
            .jd_box {
              width: 60%;
              margin: 0px auto;
              p {
                text-overflow: ellipsis;
              }
            }
            img {
              border-radius: 50%;
              margin-right: 0.26rem;
            }
          }
          .personaldetails_r {
            color: red;
            p {
              text-align: right;
            }
          }
          .recommender {
            color: #666;
          }
          b {
            width: 100%;
            height: 1px;
            background: rgb(221, 221, 221);
            display: inline-block;
          }
        }
      }
    }
  }
}
.vux-cell-box:not(:first-child):before {
  border-top: none !important;
}
.weui-progress__bar {
  background: #ff7f92 !important;
}
.left-arrow:before {
  border: 1px solid #000000 !important;
  border-width: 1px 0 0 1px !important;
}
.weui-progress__inner-bar {
  background: #ff7f92 !important;
}
</style>

